import logo from '@/assets/img/home1.png';
import config from '@/config';
import { throttle } from 'lodash';
import { useEffect, useState } from 'react';
import { history, useModel, useNavigate } from 'umi';
import './index.less';

export default function TopHeader() {
  const { headerAteFlag, setHeaderAteFlag } = useModel('homeModel');
  const [moreFlag, setMoreFlag] = useState(false);
  const navigate = useNavigate();
  const { setting } = useModel('homeModel');

  useEffect(() => {
    const handleScroll = throttle(() => {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      // console.log('scrollTop', scrollTop, headerAteFlag);
      if (scrollTop > 80) {
        setHeaderAteFlag(false);
        setMoreFlag(false);
      }
      if (scrollTop <= 80) {
        setHeaderAteFlag(true);
      }
    }, 100);
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  function toPage(e: string) {
    setMoreFlag(false);
    if(e == '/docs'){
    navigate(e, {
      state: {
        id: setting.aboutContent,
      },
    });
    }else{
    navigate(e);
    }
  }

  function toAdmin() {
    window.open(config.adminUrl);
  }

  return (
    <>
      <div className={`top-header ${headerAteFlag ? 'active' : ''}`}>
        <div
          className="th-logo"
          onClick={() => {
            toPage('/');
          }}
        >
          <img src={logo} alt="" width={'53px'} height={'53px'} />
        </div>
        <div className="ht-list">
          <ul className={`ht-list-ul ${moreFlag ? 'ht-list-ul-ate' : ''}`}>
            <li
              onClick={() => {
                toPage('/');
              }}
            >
              首页
            </li>
            <li
              onClick={() => {
                toPage('/category');
              }}
            >
              分类
            </li>
            <li
              onClick={() => {
                toPage('/docs');
              }}
            >
              关于
            </li>
            <li onClick={toAdmin}>后台</li>
          </ul>
          <div
            className="iconfont icon-caidan ht-list-btn"
            onClick={() => setMoreFlag(!moreFlag)}
          ></div>
          {/* <div className="iconfont icon-sousuo ht-list-btn"></div> */}
          {/* <div className="iconfont icon-user ht-list-btn" style={{ top: '-2px' }}></div> */}
        </div>
      </div>
    </>
  );
}
